import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom'
import { PlusOutlined } from '@ant-design/icons';
import {
    message,
    Form,
    Input,
    Button,
    Radio,
    Select,
    Cascader,
    DatePicker,
    InputNumber,
    TreeSelect,
    Switch,
    Checkbox,
    Upload,
    Image,
} from 'antd';

import request, { baseUrl } from '@/utils/request'


const Edit = () => {
    const navigate = useNavigate()
    // 获取动态路由id
    const { id } = useParams();

    // 创建表单实例
    const [myform] = Form.useForm()

    const [order, setOrder] = useState({})

    // 获取菜品信息
    const getOrder = async()=>{
        const {data} = await request.get('/order/list/' + id,{params:{Oid:id}});

            if (data.code === 200) {
                let newData = data.data;
                console.log(newData);
                if (newData.complete === 1) {
                    newData.complete = true;
                }else if(newData.complete === 0){
                    newData.complete = false;
                }
                setOrder(newData);
                myform.setFieldsValue(newData);
            }
    }

    
    useEffect(() => {
        getOrder();
    }, [])


    // 提交修改菜品
    const submit = async ({ Oid, ...values }) => {
        console.log('values', values.complete)
        const complete = values.complete ? 1 : 0
        
        const newVal = { complete, Oid}
        console.log(newVal);
        const { data } = await request.post('/order/update', newVal)
        if (data.code === 200) {
            message.success('订单修改成功')
            navigate('/manage/order/list')
        }
    }

    return (
        <div>
            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
                layout="horizontal"
                initialValues={order}
                onFinish={submit}

                form={myform}
            >
                <Form.Item name="Oid" hidden>
                    <Input />
                </Form.Item>
                <Form.Item label="用户名" name="username" >
                    <Input disabled={true}/>
                </Form.Item>
                <Form.Item label="订单总额" name='count_price' >
                    <InputNumber disabled={true}/>
                </Form.Item>
                <Form.Item label="订单时间" name='complete_time'>
                    <Input disabled={true}/>
                </Form.Item>
                <Form.Item label="是否完成" name='complete' valuePropName="checked">
                    <Switch />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 4 }}>
                    <Button type='primary' htmlType='submit'>修改</Button>
                </Form.Item>
            </Form>

        </div>
    )
}


export default Edit;

